import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Badge, Drawer, Icon as AIcon, Select as ASelect, Modal, Tooltip, Checkbox, Tree ,Button,message,Input  } from 'antd';
import { afterCloseModal } from '@/utils/utils';
import ValveData from './../ValveFlowMeterSite/ValveData'
import Map from 'ol/Map';
import Overlay from 'ol/Overlay';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import GeoJSON from 'ol/format/GeoJSON';
import find from 'lodash/find'
import { DragBox, Select } from 'ol/interaction';
import BuildModalTitle from '@/components/BuildModalTitle';
import { boundingExtent, getCenter } from 'ol/extent';
import request from '@/utils/request';
// 图层
import { Vector } from 'ol/layer';
// 数据源
import { Vector as VectorSource } from 'ol/source';
// 要素
import Feature from 'ol/Feature';
// 样式
import { Icon, Style, Text, Fill, Stroke } from 'ol/style';
import LineString from 'ol/geom/LineString';
import Point from 'ol/geom/Point';
// 坐标系转化
import { fromLonLat, toLonLat } from 'ol/proj';
import './../Home/openlayers.less';
import './../LeafletImg/index.less';

import shuang from './../../images/shuang.png';
import shuang_red from './../../images/shuang_red.png';
import water from './../../images/water.png';
import yaogan from './../../images/yaogan.jpg';
import jiedao from './../../images/jiedao.jpg';
import yali_blue from './../../images/yali_blue.png';
import yali_red from './../../images/yali_red.png';
import yali_warm from './../../images/yali_red.gif';
import jinggai from './../../images/jinggai.png';
import jianyafa from './../../images/jianyafa.png';
import santong from './../../images/santong.png';
import sitong from './../../images/sitong.png';
import dutou from './../../images/dutou.png';
import bianjingdian from './../../images/bianjingdian.png';
import zhixiandian from './../../images/zhixiandian.png';
import zhuanzhedian from './../../images/zhuanzhedian.png';

import famenjing from './../../images/famenjing.png';
import celiangji from './../../images/celiangji.png';
import famen2 from './../../images/famen2.png';
import xiaofanshuang from './../../images/xiaofanshuang.png';
import shuibiaojing from './../../images/shuibiaojing.png';
import paiqifa from './../../images/paiqifa.png';
import Detail from '../Pressure_sensors/Detail';
import SelectModalContent from './SelectModal';
import AddImg from './addImg';
import Chart from '../LeafletImg/Chart';
import { getArea, getLength } from 'ol/sphere';
import CircleStyle from 'ol/style/Circle';
import Draw from 'ol/interaction/Draw';
import Polygon from 'ol/geom/Polygon';
import { unByKey } from 'ol/Observable';
import Zmage from 'react-zmage';
const { Option } = ASelect;
const { TreeNode } = Tree;
const noSHowIcon = 11.5;
const noSHowText = 13;
const { confirm } = Modal;
const { Search } = Input;
const appendageCharacMap=[
  {key:'valveWell',url:'valve-well',checkedKeyName:'appendageCheckedKeys',img:famenjing},
  {key:'measuringMeter',url:'measuring-meter',checkedKeyName:'appendageCheckedKeys',img:celiangji},
  {key:'valve',url:'valve',checkedKeyName:'appendageCheckedKeys',img:famen2},
  {key:'fireHydrant',url:'fire-hydrant',checkedKeyName:'appendageCheckedKeys',img:xiaofanshuang},
  {key:'waterMeterWell',url:'water-meter(well)',checkedKeyName:'appendageCheckedKeys',img:shuibiaojing},
  {key:'exhaustValveWell',url:'exhaust-valve(well)',checkedKeyName:'appendageCheckedKeys',img:paiqifa},
  {key:'straight',url:'straight',checkedKeyName:'characteristicCheckedKeys',img:zhixiandian},
  {key:'teeJoint',url:'tee-joint',checkedKeyName:'characteristicCheckedKeys',img:santong},
  {key:'turningPoint',url:'turning-point',checkedKeyName:'characteristicCheckedKeys',img:zhuanzhedian},
  {key:'changeDiameterPoint',url:'change-diameter-point',checkedKeyName:'characteristicCheckedKeys',img:bianjingdian},
  {key:'plug',url:'plug',checkedKeyName:'characteristicCheckedKeys',img:dutou},
  {key:'quadJoint',url:'quad-joint',checkedKeyName:'characteristicCheckedKeys',img:sitong},
]

@connect(({ pipe_home, loading }) => ({
  pipe_home,
}))
class BasicList extends PureComponent {
  constructor(props) {
    super(props);
    this.scrollInterval = '';
    this.map = null;
    this.state = {
      points: [],
      markerArr: [],
      editRecord: {},
      selectFeature: [],
      canDrag: false,
      pipePointData: {},
      calculateType:'',
      imgList:[],
      searchKey:(Math.random()*10).toString(),

    };
  }

  changeMapType = (maptype) => {
    const { dispatch, pipe_home: { mapType } } = this.props;
    if (maptype === mapType) {
      return false;
    }
    dispatch({
      type: 'pipe_home/changeMapType',
      payload: maptype,
    });

  };

  componentDidMount() {
    const { dispatch, pipe_home: { pageLoaded } } = this.props;

    console.log('pageLoaded', pageLoaded);
    if (pageLoaded) {
      this.renderMap();
      dispatch({
        type: 'pipe_home/fetchDesignPipe',
        payload: {},
        callback: () => {
          console.log('callback');
          that.renderDesignPipe();
        },
      });
      dispatch({
        type: 'pipe_home/fetchPipe',
        payload: {},
        callback: () => {
          console.log('callback');
          that.renderPipe();

          for(let i=0;i<appendageCharacMap.length;i++){
            dispatch({
              type: 'pipe_home/fetchAppendageCharac',
              payload:appendageCharacMap[i] ,
              callback: () => {
                console.log('fetchAppendageCharac callback');
                that.renderAppendageCharac(appendageCharacMap[i]);
              },
            });
          }

        },
      });
      dispatch({
        type: 'pipe_home/fetchHoleCover',
        payload: {},
        callback: () => {
          console.log('callback');
          that.renderHoleCover();
        },
      });
      dispatch({
        type: 'pipe_home/fetchReduceValve',
        payload: {},
        callback: () => {
          console.log('callback');
          that.renderReduceValve();
        },
      });



    } else {
      const {
        pipe_home: { searchParams },
      } = this.props;
      dispatch({
        type: 'pipe_home/fetch',
        payload: searchParams,
        callback: () => {
          this.renderMap();
          const { dispatch } = this.props;
          dispatch({
            type: 'pipe_home/changeLoaded',
          });

          dispatch({
            type: 'pipe_home/fetchDesignPipe',
            payload: {},
            callback: () => {
              console.log('callback');
              that.renderDesignPipe();
            },
          });
          dispatch({
            type: 'pipe_home/fetchPipe',
            payload: {},
            callback: () => {
              console.log('callback');
              that.renderPipe();
              for(let i=0;i<appendageCharacMap.length;i++){
                dispatch({
                  type: 'pipe_home/fetchAppendageCharac',
                  payload:appendageCharacMap[i] ,
                  callback: () => {
                    console.log('fetchAppendageCharac callback');
                    that.renderAppendageCharac(appendageCharacMap[i]);
                  },
                });
              }
            },
          });

          dispatch({
            type: 'pipe_home/fetchHoleCover',
            payload: {},
            callback: () => {
              console.log('callback');
              that.renderHoleCover();
            },
          });
          dispatch({
            type: 'pipe_home/fetchReduceValve',
            payload: {},
            callback: () => {
              console.log('callback');
              that.renderReduceValve();
            },
          });

        },
      });


    }
    const that = this;
    this.timer = setInterval(function() {
      dispatch({
        type: 'pipe_home/fetch',
        payload: {},
        callback: () => {
          that.renderPoint();
        },
      });
    }, 30000);
  }

  componentWillUnmount() {
    if (this.timer) {
      console.log('clearInterval(this.timer)');
      clearInterval(this.timer);
    }
    if (this.onePointDataTimer) {
      console.log(' clearTimeout(that.onePointDataTimer)');
      clearTimeout(this.onePointDataTimer);
    }
    if (this.oneWaterDataTimer) {
      clearTimeout(this.oneWaterDataTimer);
    }
  }
  //生成附属物和特征
  renderAppendageCharac = (item) => {
    const { pipe_home: { holeCover } } = this.props;
    const checkedKeyName=this.props.pipe_home[item.checkedKeyName];
    const appendageCharacData=this.props.pipe_home[item.key];
    if (checkedKeyName.indexOf(item.key) < 0) {
      return;
    }
    let appendageCharacSource = this[`${item.key}VectorSource`] = new VectorSource({
      appendageCharacType: item.key,
      features: (new GeoJSON({ featureProjection: 'EPSG:3857' })).readFeatures(appendageCharacData),
    });
    let appendageCharacVectorLayer = this[`${item.key}VectorLayer`] = new Vector({
      source: appendageCharacSource,
      zIndex: 13,
      appendageCharacType: item.key,
      style: new Style({
        image: new Icon({
          anchorOrigin: 'top-right',
          offsetOrigin: 'top-right',
          //图标缩放比例
          scale: 1,
          //透明度
          opacity: 1,
          //图标的url
          src: item.img?item.img:jinggai,
        }),
      })
    });
    this.map.addLayer(appendageCharacVectorLayer);
  };

  renderPipe = () => {
    const { pipe_home: { pipeData, pipeVisiable } } = this.props;
    console.log('pipeData', pipeData);
    if (!pipeVisiable) {
      return;
    }
    let pipeVectorSource = this.pipeVectorSource = new VectorSource({
      features: (new GeoJSON({ featureProjection: 'EPSG:3857' })).readFeatures(pipeData),
    });
    let pipeVectorLayer = this.pipeVectorLayer = new Vector({
      source: pipeVectorSource,
      zIndex: 11,
      style: new Style({
        stroke: new Stroke({
          color: 'rgb(57, 196, 93)',
          width: 5,
        }),
      }),
    });
    this.map.addLayer(pipeVectorLayer);
  };
  renderDesignPipe = () => {
    const { pipe_home: { designPipeData, designCheckedKeys } } = this.props;
    console.log('designCheckedKeys', designCheckedKeys);
    if (designCheckedKeys.indexOf('design1') < 0) {
      return;
    }
    let designPipeVectorSource = this.designPipeVectorSource = new VectorSource({
      features: (new GeoJSON({ featureProjection: 'EPSG:3857' })).readFeatures(designPipeData),
    });
    console.log('designPipeVectorSource',designPipeVectorSource)
    let designPipeVectorLayer = this.designPipeVectorLayer = new Vector({
      source: designPipeVectorSource,
      zIndex: 10,
      style: new Style({
        stroke: new Stroke({
          color: 'rgb(0,160,239)',
          width: 2,

        }),
      }),
    });
    this.map.addLayer(designPipeVectorLayer);
  };
  renderHoleCover = () => {
    const { pipe_home: { holeCover, designCheckedKeys } } = this.props;
    if (designCheckedKeys.indexOf('holeCover') < 0) {
      return;
    }
    let holeCoverVectorSource = this.holeCoverVectorSource = new VectorSource({
      features: (new GeoJSON({ featureProjection: 'EPSG:3857' })).readFeatures(holeCover),
    });
    let holeCoverVectorLayer = this.holeCoverVectorLayer = new Vector({
      source: holeCoverVectorSource,
      zIndex: 13,
      style: new Style({
        image: new Icon({
          anchorOrigin: 'top-right',
          offsetOrigin: 'top-right',
          //图标缩放比例
          scale: 1,
          //透明度
          opacity: 1,
          //图标的url
          src: jinggai,
        }),
      })
    });
    this.map.addLayer(holeCoverVectorLayer);
  };
  renderReduceValve= () => {
    const { pipe_home: { reduceValve, designCheckedKeys } } = this.props;
    if (designCheckedKeys.indexOf('reduceValve') < 0) {
      return;
    }
    let reduceValveVectorSource = this.reduceValveVectorSource = new VectorSource({
      features: (new GeoJSON({ featureProjection: 'EPSG:3857' })).readFeatures(reduceValve),
    });
    let reduceValveVectorLayer = this.reduceValveVectorLayer = new Vector({
      source: reduceValveVectorSource,
      zIndex: 13,
      style: new Style({
        image: new Icon({
          anchorOrigin: 'top-right',
          offsetOrigin: 'top-right',
          //图标缩放比例
          scale: 1,
          //透明度
          opacity: 1,
          //图标的url
          src: jianyafa,
        }),
      })
    });
    this.map.addLayer(reduceValveVectorLayer);
  };
  renderPoint = () => {
    const { dispatch, pipe_home: { data, pressVisiable } } = this.props;
    //绘制点
    if (this.pressLayer) {
      this.map.removeLayer(this.pressLayer);
    }
    let pressFeature = [];
    for (let i = 0; i < data.length; i++) {
      let point = this.setPoint([data[i].longitude, data[i].latitude], {
        ...data[i],
        ground_set: 'press_sensor',
      }, (data[i].online_status) === 1 ? yali_blue : yali_warm);
      pressFeature.push(point);
    }
    let zoom = this.map.getView().getZoom();
    if (pressVisiable && zoom >= noSHowIcon) {
      // 创建标注的数据源
      this.pressSource = new VectorSource({
        features: pressFeature,
      });
      // 创建标注图层
      this.pressLayer = new Vector({
        source: this.pressSource,
        zIndex: 15,
      });
      // 将标注图层添加到地图上
      this.map.addLayer(this.pressLayer);
    }
  };
  renderWaterPoint = () => {
    const { dispatch, pipe_home: { waterData, waterVisiable } } = this.props;
    //绘制点
    if (this.waterLayer) {
      this.map.removeLayer(this.waterLayer);
    }
    let waterFeature = [];

    for (let i = 0; i < waterData.length; i++) {
      let point = new Feature({
        geometry: new Point(fromLonLat([waterData[i].longitude, waterData[i].latitude])),
        name: waterData[i].name,
        data_set: waterData[i].data,
        ground: 'water',
      });
      point.setStyle(this.setWaterMakerStyle(point));
      waterFeature.push(point);
    }
    let zoom = this.map.getView().getZoom();
    if (waterVisiable && zoom >= noSHowIcon) {
      // 创建标注的数据源
      this.waterSource = new VectorSource({
        features: waterFeature,
      });
      // 创建标注图层
      this.waterLayer = new Vector({
        source: this.waterSource,
        zIndex: 15,
      });
      // 将标注图层添加到地图上
      this.map.addLayer(this.waterLayer);
    }
  };
  renderWorkstations1Point=()=>{
    console.log('renderWorkstations1Point')
    const {  pipe_home: { Workstations1Data, workstations1Visiable } } = this.props;
    //绘制点
    if (this.workstations1Layer) {
      this.map.removeLayer(this.workstations1Layer);
    }
    let workstations1Feature = [];
    console.log('Workstations1Data',Workstations1Data)
    for (let i = 0; i < Workstations1Data.length; i++) {
      let point = this.setWorkstation1Point([Workstations1Data[i].longitude, Workstations1Data[i].latitude], {
        ...Workstations1Data[i],
        ground_set: 'workstations1',
      }, (Workstations1Data[i].online_status) === 1 ? shuang : shuang_red);
      workstations1Feature.push(point);
    }
    let zoom = this.map.getView().getZoom();
    if (workstations1Visiable && zoom >= noSHowIcon) {
      console.log(workstations1Visiable && zoom >= noSHowIcon)
      // 创建标注的数据源
      this.workstations1Source = new VectorSource({
        features: workstations1Feature,
      });
      // 创建标注图层
      this.workstations1Layer = new Vector({
        source: this.workstations1Source,
        zIndex: 15,
      });
      // 将标注图层添加到地图上
      this.map.addLayer(this.workstations1Layer);
    }
  }
  changePressLayerVisiable = (e) => {
    const { dispatch } = this.props;
    const that = this;
    dispatch({
      type: 'pipe_home/changePressLayerVisiable',
      payload: e.target.checked,
      callback: () => {
        let zoom = this.map.getView().getZoom();
        if (e.target.checked && zoom >= noSHowIcon) {
          const { dispatch, pipe_home: { data } } = that.props;
          let pressFeature = [];

          for (let i = 0; i < data.length; i++) {
            let point = that.setPoint([data[i].longitude, data[i].latitude], {
              ...data[i],
              ground_set: 'press_sensor',
            }, (data[i].online_status) === 1 ? yali_blue : yali_warm);
            pressFeature.push(point);
          }
          this.pressFeature = pressFeature;
          that.pressSource = new VectorSource({
            features: pressFeature,
          });
          that.pressLayer = new Vector({
            source: that.pressSource,
            zIndex: 15,
          });
          that.map.addLayer(this.pressLayer);
        } else {
          that.map.removeLayer(this.pressLayer);
          that.pressSource = null;
        }

      },
    });
  };
  changeWaterLayerVisiable = (e) => {
    const { dispatch } = this.props;
    const that = this;
    dispatch({
      type: 'pipe_home/changeWaterLayerVisiable',
      payload: e.target.checked,
      callback: () => {
        let zoom = this.map.getView().getZoom();
        if (e.target.checked && zoom >= noSHowIcon) {
          const { dispatch, pipe_home: { waterData } } = that.props;

          let waterFeature = [];

          for (let i = 0; i < waterData.length; i++) {
            let point = new Feature({
              geometry: new Point(fromLonLat([waterData[i].longitude, waterData[i].latitude])),
              name: waterData[i].name,
              data_set: waterData[i].data,
              ground: 'water',
            });
            point.setStyle(this.setWaterMakerStyle(point));
            waterFeature.push(point);
          }
          this.waterFeature = waterFeature;
          this.waterSource = new VectorSource({
            features: waterFeature,
          });
          this.waterLayer = new Vector({
            source: this.waterSource,
            zIndex: 15,
          });
          this.map.addLayer(this.waterLayer);

        } else {
          that.map.removeLayer(this.waterLayer);
          that.waterSource = null;
        }

      },
    });
  };
  changeWorkstations1Visiable=(e)=>{
    const { dispatch } = this.props;
    const that = this;
    dispatch({
      type: 'pipe_home/changeWorkstations1Visiable',
      payload: e.target.checked,
      callback: () => {
        let zoom = this.map.getView().getZoom();
        if (e.target.checked && zoom >= noSHowIcon) {
          const { dispatch, pipe_home: { Workstations1Data } } = that.props;
          let workstations1Feature = [];

          for (let i = 0; i < Workstations1Data.length; i++) {
            let point = that.setPoint([Workstations1Data[i].longitude, Workstations1Data[i].latitude], {
              ...Workstations1Data[i],
              ground_set: 'workstations1',
            }, (Workstations1Data[i].online_status) === 1 ? shuang : shuang_red);
            workstations1Feature.push(point);
          }
          that.workstations1Source = new VectorSource({
            features: workstations1Feature,
          });
          that.workstations1Layer = new Vector({
            source: that.workstations1Source,
            zIndex: 14,
          });
          that.map.addLayer(this.workstations1Layer);
        } else {
          that.map.removeLayer(this.workstations1Layer);
          that.workstations1Source = null;
        }

      },
    });
  }
  changePipeLayerVisiable = (e) => {
    const { dispatch } = this.props;

    const that = this;
    dispatch({
      type: 'pipe_home/changePipeLayerVisiable',
      payload: e.target.checked,
      callback: () => {
        if (e.target.checked) {
          that.renderPipe();
        } else {
          that.map.removeLayer(this.pipeVectorLayer);
          that.pipeVectorSource = null;
        }

      },
    });
  };
  changeHoleCoverLayerVisiable = (e) => {
    const { dispatch } = this.props;

    const that = this;
    dispatch({
      type: 'pipe_home/changeHoleCoverLayerVisiable',
      payload: e.target.checked,
      callback: () => {
        if (e.target.checked) {
          that.renderHoleCover();
        } else {
          that.map.removeLayer(this.holeCoverVectorLayer);
          that.holeCoverVectorSource = null;
        }

      },
    });
  };
  changeReduceValveLayerVisiable = (e) => {
    const { dispatch } = this.props;

    const that = this;
    dispatch({
      type: 'pipe_home/changeReduceValveLayerVisiable',
      payload: e.target.checked,
      callback: () => {
        if (e.target.checked) {
          that.renderReduceValve();
        } else {
          that.map.removeLayer(this.reduceValveVectorLayer);
          that.reduceValveVectorSource = null;
        }

      },
    });
  };
  renderMap = () => {
    const that = this;
    const { dispatch, pipe_home: { layers, zoom, center } } = this.props;
    let map = this.map = new Map({
      target: 'mapDiv',
      layers: layers,
      view: new View({
        center: fromLonLat(center),//经纬度
        zoom: zoom,
        maxZoom: 18.5,
        minZoom: 13,
      }),
    });
    console.log('renderMap')
    this.renderPoint();
    setTimeout(function() {
      that.renderWaterPoint();
      that.renderWorkstations1Point();
    },500)

    // let select = new Select({
    //   layers: [],
    // });
    let select = new Select({
      filter: function(feature, layer) {
        let isTrue = feature.get('长度');
        return Boolean(isTrue);
      },
      style: new Style({
        stroke: new Stroke({
          color: 'rgb(255,0,246)',
          width: 6,
        }),
      }),
    });
    map.addInteraction(select);

    let selectedFeatures = this.selectedFeatures = select.getFeatures();

    let dragBox = new DragBox({
      condition: function() {
        return that.state.canDrag;
      },
    });

    map.addInteraction(dragBox);

    dragBox.on('boxend', function() {
      var rotation = map.getView().getRotation();
      console.log('rotation', rotation);
      var oblique = rotation % (Math.PI / 2) !== 0;
      var candidateFeatures = oblique ? [] : selectedFeatures;
      var extent = dragBox.getGeometry().getExtent();
      // console.log('oblique', oblique);
      // console.log('extent', extent);
      const { pipe_home: { pressVisiable, pipeVisiable,waterVisiable,workstations1Visiable,appendageCheckedKeys,characteristicCheckedKeys } } = that.props;
      if (pressVisiable) {
        that.pressSource.forEachFeatureIntersectingExtent(extent, function(feature) {
          candidateFeatures.push(feature);
        });
      }
      if (pipeVisiable&&that.pipeVectorSource) {
        that.pipeVectorSource.forEachFeatureIntersectingExtent(extent, function(feature) {
          candidateFeatures.push(feature);
        });
      }
      if (waterVisiable) {
        that.waterSource.forEachFeatureIntersectingExtent(extent, function(feature) {
          candidateFeatures.push(feature);
        });
      }
      if (workstations1Visiable) {
        that.workstations1Source.forEachFeatureIntersectingExtent(extent, function(feature) {
          candidateFeatures.push(feature);
        });
      }

      for(let i=0;i<appendageCharacMap.length;i++){
        if (appendageCheckedKeys.indexOf(appendageCharacMap[i].key) >= 0) {
          that[`${appendageCharacMap[i].key}VectorSource`].forEachFeatureIntersectingExtent(extent, function(feature) {
            feature.set('ground','appendage')
            candidateFeatures.push(feature);
          });
        }
        if (characteristicCheckedKeys.indexOf(appendageCharacMap[i].key) >= 0) {
          that[`${appendageCharacMap[i].key}VectorSource`].forEachFeatureIntersectingExtent(extent, function(feature) {
            feature.set('ground','characteristic')
            candidateFeatures.push(feature);
          });
        }
      }

      const selectCandidateFeatures = candidateFeatures.getArray();
      let selectFeature = [];
      for (let i = 0; i < selectCandidateFeatures.length; i++) {
        if (selectCandidateFeatures[i].get('ground') === 'press_sensor') {
          selectFeature.push(selectCandidateFeatures[i].get('data_set'));
        } else if(selectCandidateFeatures[i].get('ground') === 'water'){
          selectFeature.push({
            ...selectCandidateFeatures[i].get('data_set'),
            ground_set: 'water',
          });
        } else if(selectCandidateFeatures[i].get('ground') === 'workstations1'){
          selectFeature.push({
            ...selectCandidateFeatures[i].get('data_set'),
            ground_set: 'workstations1',
          });
        }else if(selectCandidateFeatures[i].get('ground') === 'appendage'){
          selectFeature.push({
            ...selectCandidateFeatures[i].values_,
            ground_set: 'appendage',
          });
        }else if(selectCandidateFeatures[i].get('ground') === 'characteristic'){
          selectFeature.push({
            ...selectCandidateFeatures[i].values_,
            ground_set: 'characteristic',
          });
        }else {
          selectFeature.push({
            ...selectCandidateFeatures[i].values_,
            ground_set: 'pipe',
          });
        }

      }
      that.setState({
        selectFeature: selectFeature,
        selectModal: true,
        canDrag: false,
      });

    });

    dragBox.on('boxstart', function() {
      console.log('boxstart');
      selectedFeatures.clear();
    });


    //绘制弹出框
    let press_container = document.getElementById('press-popup');
    let header = document.getElementById('popup-header');
    let popupCloser = document.getElementById('popup-closer');
    let press_popup = new Overlay({
      //设置弹出框的容器
      element: press_container,
      //是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
      autoPan: true,
    });
    popupCloser.addEventListener('click', function() {
      press_popup.setPosition(undefined);
    });

    //绘制water弹出框
    let water_container = document.getElementById('water-popup');
    let water_header = document.getElementById('water-header');
    let water_popupCloser = document.getElementById('water-closer');
    let water_popup = new Overlay({
      element: water_container,
      autoPan: true,
    });
    water_popupCloser.addEventListener('click', function() {
      water_popup.setPosition(undefined);
    });

    //绘制workstations1弹出框
    let workstations1_container = document.getElementById('workstations1-popup');
    let workstations1_header = document.getElementById('workstations1-header');
    let workstations1_popupCloser = document.getElementById('workstations1-closer');
    let workstations1_popup = new Overlay({
      //设置弹出框的容器
      element: workstations1_container,
      //是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
      autoPan: true,
    });
    workstations1_popupCloser.addEventListener('click', function() {
      workstations1_popup.setPosition(undefined);
    });


    //绘制附属物特征值弹出框
    let appendageCharac_container = document.getElementById('appendageCharac-popup');
    let appendageCharac_header = document.getElementById('appendageCharac-header');
    let appendageCharac_popupCloser = document.getElementById('appendageCharac-closer');
    let appendageCharac_popup = new Overlay({
      //设置弹出框的容器
      element: appendageCharac_container,
      //是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
      autoPan: true,
    });
    appendageCharac_popupCloser.addEventListener('click', function() {
      appendageCharac_popup.setPosition(undefined);
    });

    //绘制管道弹出框
    let pipe_container = document.getElementById('pipe-popup');
    let pipe_header = document.getElementById('pipe-header');
    let pipe_closer = document.getElementById('pipe-closer');
    let pipe_popup = new Overlay({
      //设置弹出框的容器
      element: pipe_container,
      //是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
      autoPan: true,
    });
    pipe_closer.addEventListener('click', function() {
      pipe_popup.setPosition(undefined);
    });

    map.on(['click'], function(e) {
      // console.log(e)
      var feature = map.forEachFeatureAtPixel(e.pixel, function(feature, layer) {
        return feature;
      });
      if (feature) {
        console.log('feature',feature)
        let ground = feature.get('ground');

        if (ground === 'press_sensor') {
          let coordinates = feature.getGeometry().getCoordinates();
          let iconName = feature.get('name');
          let data_set = feature.get('data_set');
          if (data_set.ground_set === 'press_sensor') {
            that.setState({
              editRecord: data_set,
            });
            that.fetOnePointData(data_set.id, coordinates, header, iconName, press_popup);
            pipe_popup.setPosition(undefined);
            water_popup.setPosition(undefined);
            workstations1_popup.setPosition(undefined);
            appendageCharac_popup.setPosition(undefined);
          }

        } else if (ground === 'water') {
          let coordinates = feature.getGeometry().getCoordinates();

          let iconName = feature.get('name');
          let data_set = feature.get('data_set');
          // console.log('data_set', data_set);
          that.fetOneWaterData(iconName, coordinates, water_header, water_popup);
          press_popup.setPosition(undefined);
          pipe_popup.setPosition(undefined);
          workstations1_popup.setPosition(undefined);
          appendageCharac_popup.setPosition(undefined);

        }else if (ground === 'workstations1') {
          console.log('workstations1')
          let coordinates = feature.getGeometry().getCoordinates();
          let iconName = feature.get('name');
          let data_set = feature.get('data_set');
          // console.log('data_set', data_set);
          if (data_set.ground_set === 'workstations1') {
            that.setState({
              editRecord: data_set,
            });
            that.fetOneWorkstations1(data_set.id, coordinates, workstations1_header, iconName, workstations1_popup);
          }
          press_popup.setPosition(undefined);
          pipe_popup.setPosition(undefined);
          water_popup.setPosition(undefined);
          appendageCharac_popup.setPosition(undefined);
        }  else if (feature.get('长度')) {
          let coordinates = e.coordinate;
          pipe_header.innerHTML = '<span>现状管道 </span>' + feature.get('id');
          that.setState({
            pipePointData: {
              id: feature.get('id'),
              ['起点埋深']: feature.get('起点埋深'),
              ['终点埋深']: feature.get('终点埋深'),
              ['材质']: feature.get('材质'),
              ['埋设方式']: feature.get('埋设方式'),
              ['线型']: feature.get('线型'),
              ['管径']: feature.get('管径'),
              ['长度']: feature.get('长度'),
            },
          });
          pipe_popup.setPosition(coordinates);
          that.map.addOverlay(pipe_popup);

          press_popup.setPosition(undefined);
          water_popup.setPosition(undefined);
          appendageCharac_popup.setPosition(undefined);
          workstations1_popup.setPosition(undefined);
        } else if (feature.get('管点编号')&&(feature.get('特征')||feature.get('附属物'))){
          console.log("点击附属物/特征",feature.get('管点编号'))
          let coordinates = e.coordinate;
          appendageCharac_header.innerHTML = '<span>附属物/特征 </span>' + feature.get('管点编号');
          let appendageCharacTable=`<tbody>`;
          for(let key  in feature.values_){
            if(feature.get(key)&&key!=='geometry'&&key!=='ground'){
              appendageCharacTable+=`<tr> <td class='custom-table-title'>${key}</td>
              <td class='custom-table-value'>${feature.get(key)}</td></tr>`
            }
          }
          appendageCharacTable+=`</tbody>`
          if(feature.get('附属物')){

            request(`/images`,{
              method:'get',
              params:{
                group:feature.get('管点编号')
              }
            }).then((response)=>{
              if(response.status===200){
                that.setState({
                  imgList:response.data.data,
                  editRecord:{
                    appendageId:feature.get('管点编号')
                  }
                })
              }
            });
          }else{
            that.setState({
              editRecord:{},
              imgList:[]
            })
          }
          appendageCharac_container.querySelector('.custom-table').innerHTML=appendageCharacTable
          appendageCharac_popup.setPosition(coordinates);
          that.map.addOverlay(appendageCharac_popup);


          press_popup.setPosition(undefined);
          water_popup.setPosition(undefined);
          workstations1_popup.setPosition(undefined);
          pipe_popup.setPosition(undefined);

        }
      } else {
        if(e.type==='click'){
          press_popup.setPosition(undefined);
          pipe_popup.setPosition(undefined);
          water_popup.setPosition(undefined);
          workstations1_popup.setPosition(undefined);
          appendageCharac_popup.setPosition(undefined);
        }
        that.setState({
          editRecord:{},
          imgList:[]
        })

        if (that.onePointDataTimer) {
          clearTimeout(that.onePointDataTimer);
        }
        if (that.oneWorkstations1DataTimer) {
          clearTimeout(that.oneWorkstations1DataTimer);
        }
      }
    });

    map.on('moveend', function(e) {
      let zoom = map.getView().getZoom();  //获取当前地图的缩放级别
      let center = map.getView().getCenter();
      console.log(toLonLat(center));
      console.log(zoom)
      if (zoom < noSHowIcon && that.pressLayer) {
        that.pressLayer&&that.pressLayer.setVisible(false);
        that.waterLayer&&that.waterLayer.setVisible(false);
        that.workstations1Layer&&that.workstations1Layer.setVisible(false);
      } else if (zoom >= noSHowIcon && that.pressLayer) {
        that.pressLayer&&that.pressLayer.setVisible(true);
        that.waterLayer&&that.waterLayer.setVisible(true);
        that.workstations1Layer&&that.workstations1Layer.setVisible(true);

      }
      if (zoom < noSHowText && that.pressLayer) {
        const features = that.pressLayer.getSource().getFeatures();
        for (let i = 0; i < features.length; i++) {
          features[i].getStyle().getText().setText('');
        }
        const waterfeatures = that.waterLayer.getSource().getFeatures();
        for (let i = 0; i < waterfeatures.length; i++) {
          waterfeatures[i].getStyle().getText().setText('');
        }
        const workstations1features = that.workstations1Layer.getSource().getFeatures();
        for (let i = 0; i < workstations1features.length; i++) {
          workstations1features[i].getStyle().getText().setText('');
        }

      } else if (zoom >= noSHowText && that.pressLayer) {
        const features = that.pressLayer.getSource().getFeatures();
        for (let i = 0; i < features.length; i++) {
          features[i].getStyle().getText().setText(features[i].get('name'));
        }
        if(that.waterLayer){
          const waterfeatures = that.waterLayer.getSource().getFeatures();
          for (let i = 0; i < waterfeatures.length; i++) {
            waterfeatures[i].getStyle().getText().setText(waterfeatures[i].get('name'));
          }
        }

        if(that.workstations1Layer){
          const workstations1features = that.workstations1Layer.getSource().getFeatures();
          for (let i = 0; i < workstations1features.length; i++) {
            workstations1features[i].getStyle().getText().setText(workstations1features[i].get('name'));
          }
        }

      }
      dispatch({
        type: 'pipe_home/changeCenterAndZoom',
        payload: {
          zoom, center: toLonLat(center),
        },
      });
    });

  };
  fetOnePointData = (id, coordinates, header, iconName, press_popup) => {
    const { dispatch } = this.props;
    const that = this;
    dispatch({
      type: 'pipe_home/fetchPointData',
      payload: {
        id: id,
      },
      callback: () => {
        if (coordinates) {
          header.innerHTML = '<span>压力传感器 : ' + iconName + '</span>';
          press_popup.setPosition(coordinates);
          this.map.addOverlay(press_popup);
        }
        if (that.onePointDataTimer) {
          clearTimeout(that.onePointDataTimer);
        }
        that.onePointDataTimer = setTimeout(function() {
          that.fetOnePointData(id);
        }, 10000);


      },
    });
  };
  fetOneWorkstations1 = (id, coordinates, header, iconName, popup) => {
    const { dispatch } = this.props;
    const that = this;
    dispatch({
      type: 'pipe_home/fetOneWorkstations1',
      payload: {
        id: id,
      },
      callback: () => {
        if (coordinates) {
          header.innerHTML = '<span>双阀减压阀井 : ' + iconName + '</span>';
          popup.setPosition(coordinates);
          this.map.addOverlay(popup);
        }
        if (that.oneWorkstations1DataTimer) {
          clearTimeout(that.oneWorkstations1DataTimer);
        }
        that.oneWorkstations1DataTimer = setTimeout(function() {
          that.fetOneWorkstations1(id);
        }, 10000);


      },
    });
  };
  fetOneWaterData = (iconName, coordinates, header, popup) => {
    const { dispatch } = this.props;
    const that = this;
    dispatch({
      type: 'pipe_home/fetOneWaterData',
      payload: {
        name: iconName,
      },
      callback: () => {
        if (coordinates) {
          header.innerHTML = '<span>' + iconName + '</span>';
          popup.setPosition(coordinates);
          this.map.addOverlay(popup);
        }
        if (that.oneWaterDataTimer) {
          clearTimeout(that.oneWaterDataTimer);
        }
        that.oneWaterDataTimer = setTimeout(function() {
          that.fetOneWaterData(iconName);
        }, 10000);


      },
    });
  };
  setCenter = () => {
    let view = this.map.getView();
    // view.setZoom(14);
    const { pipe_home: { data,waterData } } = this.props;
    let Coordinates = [];
    for (let i = 0; i < data.length; i++) {
      Coordinates.push(fromLonLat([data[i].longitude, data[i].latitude]));
    }
    for (let i = 0; i < waterData.length; i++) {
      Coordinates.push(fromLonLat([waterData[i].longitude, waterData[i].latitude]));
    }
    let extent = boundingExtent(Coordinates);
    let center = getCenter(extent);   //获取边界区域的中心位置
    view.setZoom(10);
    view.setCenter(center);  //设置当前地图的显示中心位置

  };
  ZoonIn = () => {
    let view = this.map.getView();
    let zoom = view.getZoom();
    view.setZoom(zoom + 1);
  };
  ZoonOut = () => {
    let view = this.map.getView();
    let zoom = view.getZoom();
    view.setZoom(zoom - 1);
  };
  setPoint = (coord, data_set, img) => {
    let point = new Feature({
      geometry: new Point(fromLonLat(coord)),
      name: data_set.name,
      ground: 'press_sensor',
      data_set: data_set,
    });
    //设置图标的样式
    point.setStyle(this.setMakerStyle(point, img, (data_set.online_status) === 1));
    return point;
  };
  setMakerStyle = (feature, img, status) => {
    let zoom = this.map.getView().getZoom();  //获取当前地图的缩放级别
    return new Style({
      /**{olx.style.IconOptions}类型*/
      image: new Icon({
        anchorOrigin: 'top-right',
        offsetOrigin: 'top-right',
        //图标缩放比例
        scale: 1,
        //透明度
        opacity: 1,
        //图标的url
        src: img,
      }),
      text: new Text({
        //位置
        textAlign: 'center',
        //基准线
        textBaseline: 'middle',
        //文字样式
        font: 'normal 12px 微软雅黑',
        offsetY: 22,
        //文本内容
        text: zoom < noSHowText ? '' : feature.get('data_set').name,
        //文本填充样式（即文字颜色）
        fill: new Fill({ color: '#ffffff' }),
        backgroundFill: status ? new Fill({ color: '#3b79fe' }) : new Fill({ color: '#fe2a04' }),
        padding: [3, 0, 0, 3],
      }),
    });
  };
  setWorkstation1Point = (coord, data_set, img) => {
    let point = new Feature({
      geometry: new Point(fromLonLat(coord)),
      name: data_set.name,
      ground: 'workstations1',
      data_set: data_set,
    });
    //设置图标的样式
    point.setStyle(this.setWorkstation1MakerStyle(point, img, (data_set.online_status) === 1));
    return point;
  };
  setWorkstation1MakerStyle = (feature, img, status) => {
    let zoom = this.map.getView().getZoom();  //获取当前地图的缩放级别
    return new Style({
      /**{olx.style.IconOptions}类型*/
      image: new Icon({
        anchorOrigin: 'top-right',
        offsetOrigin: 'top-right',
        //图标缩放比例
        scale: 1,
        //透明度
        opacity: 1,
        //图标的url
        src: img,
      }),
      text: new Text({
        //位置
        textAlign: 'center',
        //基准线
        textBaseline: 'middle',
        //文字样式
        font: 'normal 12px 微软雅黑',
        offsetY: 22,
        //文本内容
        text: zoom < noSHowText ? '' : feature.get('data_set').name,
        //文本填充样式（即文字颜色）
        fill: new Fill({ color: '#ffffff' }),
        backgroundFill: status ? new Fill({ color: '#3b79fe' }) : new Fill({ color: '#fe2a04' }),
        padding: [3, 0, 0, 3],
      }),
    });
  };
  setWaterMakerStyle = (feature) => {
    let zoom = this.map.getView().getZoom();  //获取当前地图的缩放级别
    return new Style({
      /**{olx.style.IconOptions}类型*/
      image: new Icon({
        anchorOrigin: 'top-right',
        offsetOrigin: 'top-right',
        //图标缩放比例
        scale: 1,
        //透明度
        opacity: 1,
        //图标的url
        src: water,
      }),
      text: new Text({
        //位置
        textAlign: 'center',
        //基准线
        textBaseline: 'middle',
        //文字样式
        font: 'normal 12px 微软雅黑',
        offsetY: 22,
        //文本内容
        text: zoom < noSHowText ? '' : feature.get('name'),
        //文本填充样式（即文字颜色）
        fill: new Fill({ color: '#ffffff' }),
        backgroundFill: new Fill({ color: '#fe1ba3' }),
        padding: [3, 0, 0, 3],
      }),
    });
  };
  renderSensorStatus = (val) => {
    let status = 'success';
    let explain = '';
    switch (val) {
      case 4:
        status = 'error';
        explain = '子设备失联';
        break;
      case 1:
        status = 'warning';
        explain = '电池电压低';
        break;
      case 0:
        status = 'success';
        explain = '正常';
        break;
      default:
        status = 'warning';
        explain = '未知';
    }
    return (
      <Fragment>
        <Badge status={status}/>{explain}
      </Fragment>
    );
  };
  renderOnlineStatus = (val) => {
    let status = 'success';
    let explain = '';
    switch (val) {
      case -1:
        status = 'error';
        explain = '离线';
        break;
      case 1:
        status = 'processing';
        explain = '在线';
        break;
      default:
        status = 'warning';
        explain = '未知';
    }
    return (
      <Fragment>
        <Badge status={status}/>{explain}
      </Fragment>
    );
  };
  renderPressStatus = (val) => {
    let status = 'success';
    let explain = '';
    switch (val) {
      case 4:
        status = 'error';
        explain = '压力传感器故障';
        break;
      case 2:
        status = 'warning';
        explain = '压力高于上限阀值';
        break;
      case 1:
        status = 'warning';
        explain = '压力低于下限阀值';
        break;
      case 0:
        status = 'success';
        explain = '压力正常';
        break;
      default:
        status = 'warning';
        explain = '未知';
    }
    return (
      <Fragment>
        <Badge status={status}/>{explain}
      </Fragment>
    );
  };
  showWaterDetail=(name)=>{
    let waterType=[]
    switch(name){
      case "园艺场沉沙池":
        waterType=['item1','item2'];
        break;
      case "塔尔郎水厂":
        waterType=['item3','item4','item5'];
        break;
      case "老城区水厂":
        waterType=['item6','item7','item8'];
        break;
      case "示范区水厂":
        waterType=['item9','item10'];
        break;
      default:
        break;
    }
    this.setState({
      waterType: waterType,
      modalTitle:name,
      editModal:true
    });
  }
  addInteraction=()=>{
    let tip=document.querySelectorAll('.ol-tooltip-static')
    for(let i=0;i<tip.length;i++){
      tip[i].parentNode.removeChild(tip[i])
    }
    const that=this;
    let formatArea = function (polygon) {
      console.log('计算面积')
      let area = getArea(polygon);
      let output;
      if (area > 10000) {
        output = Math.round((area / 1000000) * 100) / 100 + ' ' + 'km<sup>2</sup>';
      } else {
        output = Math.round(area * 100) / 100 + ' ' + 'm<sup>2</sup>';
      }
      return output;
    };

    let formatLength = function (line) {
      console.log('计算长度')
      let length = getLength(line);
      let output;
      if (length > 100) {
        output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km';
      } else {
        output = Math.round(length * 100) / 100 + ' ' + 'm';
      }
      return output;
    };
    let measureTooltipElement;
    let measureTooltip;
    let createMeasureTooltip = function() {
      if (measureTooltipElement) {
        measureTooltipElement.parentNode.removeChild(measureTooltipElement);
      }
      measureTooltipElement = document.createElement('div');
      measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
      measureTooltip = new Overlay({
        element: measureTooltipElement,
        offset: [0, -15],
        positioning: 'bottom-center',
      });
      that.map.addOverlay(measureTooltip);
    }


    let type=this.state.calculateType;
    if(this.drawVector){
      this.map.removeLayer(this.drawVector);
      this.drawSource=null;
      this.drawVector=null;
      this.map.removeInteraction(this.draw);

    }
    let source = this.drawSource=new VectorSource({wrapX: false});

    let vector = this.drawVector= new Vector({
      source: source,
      style: new Style({
        fill: new Fill({
          color: 'rgba(255, 255, 255, 0.2)',
        }),
        stroke: new Stroke({
          color: '#ffcc33',
          width: 2,
        }),
        image: new CircleStyle({
          radius: 7,
          fill: new Fill({
            color: '#ffcc33',
          }),
        }),
      }),
    });
    this.map.addLayer(vector);
    let draw = this.draw=new Draw({
      source: source,
      type: type
    });
    this.map.addInteraction(draw);
    createMeasureTooltip();
    let listener;
    let sketch;
    draw.on('drawstart', function (evt) {
      // set sketch
      sketch = evt.feature;
      listener = sketch.getGeometry().on('change', function (evt) {
        let geom = evt.target;
        let tooltipCoord = evt.coordinate;
        let output;
        if (geom instanceof Polygon) {
          let p=geom.clone();
          let circleIn4326 = p.transform(that.map.getView().getProjection(),'EPSG:3857');
          output = formatArea(circleIn4326);
          tooltipCoord = geom.getInteriorPoint().getCoordinates();
        } else if (geom instanceof LineString) {
          let p=geom.clone();
          let circleIn4326 = p.transform(that.map.getView().getProjection(),'EPSG:3857');
          output = formatLength(circleIn4326);
          tooltipCoord = geom.getLastCoordinate();
        }
        measureTooltipElement.innerHTML = output;
        measureTooltip.setPosition(tooltipCoord);
      });
    });
    draw.on('drawend', function () {
      measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
      measureTooltip.setOffset([0, -7]);
      sketch = null;
      measureTooltipElement = null;
      createMeasureTooltip();
      unByKey(listener);
    });

  }
  handleAddImg=()=>{
    const formValues = this.AddImgForm.props.form.getFieldsValue();
    console.log('formValues', formValues);
    const that = this;
    let formData = new FormData();
    if(formValues.file){
      formData.append("file", formValues.file.file);
    }else{
      message.error('请先选择图片')
      return false
    }
    formData.append("group", this.state.editRecord.appendageId);
    formData.append("remark", formValues.remark);
    request(`/images`,{
      method:'POST',
      data:formData
    }).then((response)=>{
      if(response.status===200){
        console.log('添加站点图片成功')
        message.success('添加图片成功')
        that.setState({
          imgModal:false,
        })
        request(`/images`,{
          method:'get',
          params:{
            group:that.state.editRecord.appendageId
          }
        }).then((response2)=>{
          if(response.status===200){
            that.setState({
              imgList:response2.data.data,

            })
          }
        });
      }
    });

  }
  changeSearchValue=(value)=>{
    console.log('value',value)
    const { dispatch } = this.props;
    const that = this;
    dispatch({
      type: 'pipe_home/changeSearchText',
      payload:value,
      callback: () => {
        for(let i=0;i<appendageCharacMap.length;i++){
          dispatch({
            type: 'pipe_home/fetchAppendageCharac',
            payload:appendageCharacMap[i] ,
            callback: () => {
              console.log('fetchAppendageCharac callback');
              if(that[`${appendageCharacMap[i].key}VectorSource`]){
                that.map.removeLayer(that[`${appendageCharacMap[i].key}VectorLayer`]);
                that[`${appendageCharacMap[i].key}VectorSource`] = null;
              }
              that.renderAppendageCharac(appendageCharacMap[i]);
            },
          });
        }
        setTimeout(function() {
          const {  pipe_home: { appendageCheckedKeys,characteristicCheckedKeys} } = that.props;
          let points=[]
          for(let i=0;i<appendageCharacMap.length;i++){
            if(characteristicCheckedKeys.indexOf(appendageCharacMap[i].key)>=0||
              appendageCheckedKeys.indexOf(appendageCharacMap[i].key)>=0
            ){
              const appendageCharacData=that.props.pipe_home[appendageCharacMap[i].key];
              for(let j=0;j<appendageCharacData.features.length;j++){
                points.push(fromLonLat(appendageCharacData.features[j].geometry.coordinates))
              }
            }

          }
          if(points.length>0){
            let view = that.map.getView();
            let extent = boundingExtent(points);
            view.fit(extent, {padding: [100, 100, 100, 100]});
          }


        },500)


      },
    });
  }
  render() {
    const { pipePointData } = this.state;
    const { dispatch, pipe_home: { data, bore,mapType, pointData, waterPointData, waterVisiable, pressVisiable,
      showMapType, pipeVisiable, designCheckedKeys, pipeCount, pipeLength,workstations1PointData,
      workstations1Visiable,appendageCheckedKeys,characteristicCheckedKeys,searchText} } = this.props;
    const that = this;
    return <div style={{
      height: '100%',
      width: '100%',
      overflow: 'hidden',
      position: 'relative',
    }}>
      <div id={'mapDiv'} style={{
        display: 'flex',
        height: '100%',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      </div>
      <div id="press-popup" className="ol-popup">
        <a href="#" id="popup-closer" className="ol-popup-closer"></a>
        <div id="popup-header" className={'ol-popup-header'}></div>
        <div id="popup-content" className={'ol-popup-content'}>
          <table className={'custom-table'}>
            <tbody>
            <tr>
              <td className={'custom-table-title'}>上传时间</td>
              <td className={'custom-table-value'}>{pointData.upload_time}</td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>在线状态</td>
              <td className={'custom-table-value'}>{this.renderOnlineStatus(pointData.online_status)}</td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>传感器状态</td>
              <td className={'custom-table-value'}>{this.renderSensorStatus(pointData.sensor_status)}</td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>压力状态</td>
              <td className={'custom-table-value'}>{this.renderPressStatus(pointData.pressure_status)}</td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>压力(MPA)</td>
              <td className={'custom-table-value'}>{pointData.pressure}</td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>电压(V)</td>
              <td className={'custom-table-value'}>{pointData.voltage}</td>
            </tr>
            </tbody>
          </table>
          <span onClick={() => {
            this.setState({
              infoModal: true,
            });
          }} className={'success'} style={{ cursor: 'pointer' }}>查看详情</span>
        </div>
      </div>
      <div id="water-popup" className="ol-popup">
        <a href="#" id="water-closer" className="ol-popup-closer"></a>
        <div id="water-header" className={'ol-popup-header'}></div>
        <div id="water-content" className={'ol-popup-content'}>
          <table className={'custom-table'}>
            <tbody>
            {
              waterPointData.name === '园艺场沉沙池' &&
              <Fragment>
                <tr>
                  <td className={'custom-table-title'}>采集时间</td>
                  <td className={'custom-table-value'}>{waterPointData.data.upload_time}</td>
                </tr>
                <tr>
                  <td className={'custom-table-title'}>液位(m3)</td>
                  <td className={'custom-table-value'}>{waterPointData.data.item1}</td>
                </tr>
                <tr>
                  <td className={'custom-table-title'}>浊度(NTU)</td>
                  <td className={'custom-table-value'}>{waterPointData.data.item2}</td>
                </tr>
              </Fragment>
            }
            {
              waterPointData.name === '塔尔郎水厂' &&
              <Fragment>
                <tr>
                  <td className={'custom-table-title'}>采集时间</td>
                  <td className={'custom-table-value'}>{waterPointData.data.upload_time}</td>
                </tr>
                <tr>
                  <td className={'custom-table-title'}>进水流量(m³/h)</td>
                  <td className={'custom-table-value'}>{waterPointData.data.item3}</td>
                </tr>
                <tr>
                  <td className={'custom-table-title'}>出水流量(m³/h)</td>
                  <td className={'custom-table-value'}>{waterPointData.data.item4}</td>
                </tr>
                <tr>
                  <td className={'custom-table-title'}>取水口浊度(NTU)</td>
                  <td className={'custom-table-value'}>{waterPointData.data.item5}</td>
                </tr>
              </Fragment>
            }
            {
              waterPointData.name === '老城区水厂' &&
              <Fragment>
                <tr>
                  <td className={'custom-table-title'}>采集时间</td>
                  <td className={'custom-table-value'}>{waterPointData.data.upload_time}</td>
                </tr>
                <tr>
                  <td className={'custom-table-title'}>出水流量(m³/h)</td>
                  <td className={'custom-table-value'}>{waterPointData.data.item8}</td>
                </tr>
                <tr>
                  <td className={'custom-table-title'}>1#液位(m)</td>
                  <td className={'custom-table-value'}>{waterPointData.data.item7}</td>
                </tr>
                <tr>
                  <td className={'custom-table-title'}>2#/3#液位(m)</td>
                  <td className={'custom-table-value'}>{waterPointData.data.item6}</td>
                </tr>
              </Fragment>
            }
            {
              waterPointData.name === '示范区水厂' &&
              <Fragment>
                <tr>
                  <td className={'custom-table-title'}>采集时间</td>
                  <td className={'custom-table-value'}>{waterPointData.data.upload_time}</td>
                </tr>
                <tr>
                  <td className={'custom-table-title'}>水流量(m³/h)</td>
                  <td className={'custom-table-value'}>{waterPointData.data.item10}</td>
                </tr>
                <tr>
                  <td className={'custom-table-title'}>液位(m)</td>
                  <td className={'custom-table-value'}>{waterPointData.data.item9}</td>
                </tr>
              </Fragment>
            }
            </tbody>
          </table>
          <span onClick={() => {
            this.showWaterDetail(waterPointData.name)
          }} className={'success'} style={{ cursor: 'pointer' }}>查看详情</span>
        </div>
      </div>
      <div id="workstations1-popup" className="ol-popup">
        <a href="#" id="workstations1-closer" className="ol-popup-closer"></a>
        <div id="workstations1-header" className={'ol-popup-header'}></div>
        <div id="workstations1-content" className={'ol-popup-content'}>
          <table className={'custom-table'}>
            <tbody>
            <tr>
              <td style={{textAlign:'left'}} className={'custom-table-title'}>基本信息</td>
              <td className={'custom-table-value'}></td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>在线状态</td>
              <td className={'custom-table-value'}>{this.renderOnlineStatus(workstations1PointData.online_status)}</td>
            </tr>
            <tr>
              <td style={{textAlign:'left'}} className={'custom-table-title'}>传感器</td>
              <td className={'custom-table-value'}></td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>阀前压力(MPa)</td>
              <td className={'custom-table-value'}>{workstations1PointData.faqian}</td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>阀后压力(MPa)</td>
              <td className={'custom-table-value'}>{workstations1PointData.fahou}</td>
            </tr>
            </tbody>
          </table>
          <span onClick={() => {
            this.setState({
              workstationModal: true,
              editRecord:workstations1PointData
            });
          }} className={'success'} style={{ cursor: 'pointer' }}>查看详情</span>
        </div>
      </div>
      <div id="pipe-popup" className="ol-popup">
        <a href="#" id="pipe-closer" className="ol-popup-closer"></a>
        <div id="pipe-header" className={'ol-popup-header'}></div>
        <div id="pipe-content" className={'ol-popup-content'}>
          <table className={'custom-table'}>
            <tbody>
            <tr>
              <td className={'custom-table-title'}>id</td>
              <td className={'custom-table-value'}>{pipePointData.id}</td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>起点埋深(m)</td>
              <td className={'custom-table-value'}>{pipePointData['起点埋深']}</td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>终点埋深(m)</td>
              <td className={'custom-table-value'}>{pipePointData['终点埋深']}</td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>埋设方式</td>
              <td className={'custom-table-value'}>{pipePointData['埋设方式']}</td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>材质</td>
              <td className={'custom-table-value'}>{pipePointData['材质']}</td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>线型</td>
              <td className={'custom-table-value'}>{pipePointData['线型']}</td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>管径</td>
              <td className={'custom-table-value'}>{pipePointData['管径']}</td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>长度(m)</td>
              <td className={'custom-table-value'}>{pipePointData['长度'] && pipePointData['长度'].toFixed(2)}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div id="appendageCharac-popup" className="ol-popup">
        <a href="#" id="appendageCharac-closer" className="ol-popup-closer"></a>
        <div id="appendageCharac-header" className={'ol-popup-header'}></div>
        <div id="appendageCharac-content" className={'ol-popup-content'}>
          <table className={'custom-table'}>
          </table>
          {
            this.state.editRecord.appendageId&&
            <div style={{marginTop:'6px'}}>
              {
                this.state.imgList.map((item,index)=>{
                  return <div key={index} style={{position:'relative'}}>
                    <div style={{position:'absolute',right:'0',top:'0',cursor:'pointer'}} onClick={()=>{
                      confirm({
                        title: `确定要删除该图片吗吗?`,
                        content: '请谨慎操作',
                        okText: '确定',
                        okType: 'danger',
                        cancelText: '取消',
                        centered: true,
                        maskClosable: true,
                        onOk() {
                          request(`/images/${item.id}`,{
                            method:'delete',
                          }).then((response)=>{
                            if(response.status===200){
                              message.success('删除图片成功')
                              request(`/images`,{
                                method:'get',
                                params:{
                                  group:that.state.editRecord.appendageId
                                }
                              }).then((response2)=>{
                                if(response.status===200){
                                  that.setState({
                                    imgList:response2.data.data,
                                  })
                                }
                              });
                            }
                          });
                        },
                        onCancel() {
                          console.log('Cancel');
                        },
                      });

                    }}>
                      <AIcon style={{fontSize:'16px'}} type="close-square" />
                    </div>
                    <Zmage src={item.path} alt=""style={{width:'100%'}}/>
                    <h3 style={{textAlign:'center'}}>{item.remark}</h3>
                  </div>
                })
              }
              <Button type={'primary'} size={'small'} onClick={()=>{
                this.setState({
                  imgModal:true
                })
              }}>添加图片</Button>
            </div>
          }

        </div>
      </div>
      <div id="info"></div>
      <div className="summary-info">
        压力传感器<span>{data.length}</span>个 现状管道<span>{pipeCount}</span>根 总长<span>{pipeLength}</span>米
      </div>
      <div className={`maptype ${showMapType ? 'maptype_active' : ''}`}>
        <div>
          <h3>图层控制</h3>
          <div className="maptype_item">
            <img src={yaogan} alt=""/>
            <span className={mapType === 'sensing' ? 'active' : ''} onClick={() => {
              this.changeMapType('sensing');
            }}>遥感图</span>
          </div>
          <div className="maptype_item">
            <img src={jiedao} alt=""/>
            <span className={mapType === 'road' ? 'active' : ''} onClick={() => {
              this.changeMapType('road');
            }}>街道图</span>
          </div>
          <div className="maptype_checkbox">
            <div>
              <Checkbox style={{ marginLeft: '22px', marginBottom: '5px' }} checked={pressVisiable}
                        onChange={this.changePressLayerVisiable}>压力传感器<img
                src={yali_blue} alt=""/></Checkbox>
            </div>
            <div>
              <Checkbox style={{ marginLeft: '22px', marginBottom: '5px' }} checked={waterVisiable}
                        onChange={this.changeWaterLayerVisiable}>水厂监控设备<img
                src={water} alt=""/></Checkbox>
            </div>
            <div>
              <Checkbox style={{ marginLeft: '22px', marginBottom: '5px' }} checked={workstations1Visiable}
                        onChange={this.changeWorkstations1Visiable}>双阀减压阀井<img
                src={shuang} alt=""/></Checkbox>
            </div>
            <div>
              <Checkbox style={{ marginLeft: '22px', marginBottom: '5px' }} checked={pipeVisiable}
                        onChange={this.changePipeLayerVisiable}>现状管道(绿线)</Checkbox>
            </div>
            {/*<div>
            <Checkbox style={{ marginLeft: '27px', marginBottom: '5px' }} checked={holeCoverVisiable}
                      onChange={this.changeHoleCoverLayerVisiable}>井盖<img
              src={jinggai} alt=""/></Checkbox>
          </div>
          <div>
            <Checkbox style={{ marginLeft: '27px', marginBottom: '5px' }} checked={reduceValveVisiable}
                      onChange={this.changeReduceValveLayerVisiable}>减压阀<img
              src={jianyafa} alt=""/></Checkbox>
          </div>*/}
            <Tree
              checkable
              autoExpandParent
              checkedKeys={appendageCheckedKeys}
              onCheck={(checkedKeys, info) => {
                console.log('checkedKeys',checkedKeys)
                dispatch({
                  type: 'pipe_home/changeAppendageCheckenKeys',
                  payload: checkedKeys,
                  callback: () => {
                    const {  pipe_home: {  appendageCheckedKeys} } = this.props;
                    //阀门井
                    if (appendageCheckedKeys.indexOf('valveWell') >= 0 ) {
                      if(!that.valveWellVectorSource){
                        const item =find(appendageCharacMap,(o)=>o.key==='valveWell')
                        if(item){
                          that.renderAppendageCharac(item);
                        }
                      }
                    } else {
                      that.map.removeLayer(that.valveWellVectorLayer);
                      that.valveWellVectorSource = null;
                    }

                    //阀门
                    if (appendageCheckedKeys.indexOf('valve') >= 0 ) {
                      if(!that.valveVectorSource){
                        const item =find(appendageCharacMap,(o)=>o.key==='valve')
                        if(item){
                          that.renderAppendageCharac(item);
                        }
                      }
                    } else {
                      that.map.removeLayer(that.valveVectorLayer);
                      that.valveVectorSource = null;
                    }

                    //测量计
                    if (appendageCheckedKeys.indexOf('measuringMeter') >= 0 ) {
                      if(!that.measuringMeterVectorSource){
                        const item =find(appendageCharacMap,(o)=>o.key==='measuringMeter')
                        if(item){
                          that.renderAppendageCharac(item);
                        }
                      }
                    } else {
                      that.map.removeLayer(that.measuringMeterVectorLayer);
                      that.measuringMeterVectorSource = null;
                    }

                    //消防栓
                    if (appendageCheckedKeys.indexOf('fireHydrant') >= 0 ) {
                      if(!that.fireHydrantVectorSource){
                        const item =find(appendageCharacMap,(o)=>o.key==='fireHydrant')
                        if(item){
                          that.renderAppendageCharac(item);
                        }
                      }
                    } else {
                      that.map.removeLayer(that.fireHydrantVectorLayer);
                      that.fireHydrantVectorSource = null;
                    }

                    //水表（井）
                    if (appendageCheckedKeys.indexOf('waterMeterWell') >= 0 ) {
                      if(!that.waterMeterWellVectorSource){
                        const item =find(appendageCharacMap,(o)=>o.key==='waterMeterWell')
                        if(item){
                          that.renderAppendageCharac(item);
                        }
                      }
                    } else {
                      that.map.removeLayer(that.waterMeterWellVectorLayer);
                      that.waterMeterWellVectorSource = null;
                    }

                    //排气阀（井）
                    if (appendageCheckedKeys.indexOf('exhaustValveWell') >= 0 ) {
                      if(!that.exhaustValveWellVectorSource){
                        const item =find(appendageCharacMap,(o)=>o.key==='exhaustValveWell')
                        if(item){
                          that.renderAppendageCharac(item);
                        }
                      }
                    } else {
                      that.map.removeLayer(that.exhaustValveWellVectorLayer);
                      that.exhaustValveWellVectorSource = null;
                    }

                  },
                });
              }}
            >
              <TreeNode title="附属物" key="design">
                <TreeNode title={<span>阀门井 <img
                  src={famenjing} alt=""/> ({this.props.pipe_home.valveWell&&this.props.pipe_home.valveWell.features.length})</span>} key="valveWell"/>
                <TreeNode title={<span>阀门 <img
                  src={famen2} alt=""/> ({this.props.pipe_home.valve&&this.props.pipe_home.valve.features.length})</span>} key="valve"/>
                <TreeNode title={<span>测量计 <img
                  src={celiangji} alt=""/> ({this.props.pipe_home.measuringMeter&&this.props.pipe_home.measuringMeter.features.length})</span>} key="measuringMeter"/>
                <TreeNode title={<span>消防栓 <img
                  src={xiaofanshuang} alt=""/> ({this.props.pipe_home.fireHydrant&&this.props.pipe_home.fireHydrant.features.length})</span>} key="fireHydrant"/>
                <TreeNode title={<span>水表(井) <img
                  src={shuibiaojing} alt=""/> ({this.props.pipe_home.waterMeterWell&&this.props.pipe_home.waterMeterWell.features.length})</span>} key="waterMeterWell"/>
                <TreeNode title={<span>排气阀(井) <img
                  src={paiqifa} alt=""/> ({this.props.pipe_home.exhaustValveWell&&this.props.pipe_home.exhaustValveWell.features.length})</span>} key="exhaustValveWell"/>
              </TreeNode>
            </Tree>
            <Tree
              checkable
              autoExpandParent
              checkedKeys={characteristicCheckedKeys}
              onCheck={(checkedKeys, info) => {
                console.log('checkedKeys',checkedKeys)
                dispatch({
                  type: 'pipe_home/changeCharacteristicCheckenKeys',
                  payload: checkedKeys,
                  callback: () => {
                    const {  pipe_home: {  characteristicCheckedKeys} } = this.props;
                    //三通
                    if (characteristicCheckedKeys.indexOf('teeJoint') >= 0 ) {
                      if(!that.teeJointVectorSource){
                        const item =find(appendageCharacMap,(o)=>o.key==='teeJoint')
                        if(item){
                          that.renderAppendageCharac(item);
                        }
                      }
                    } else {
                      that.map.removeLayer(that.teeJointVectorLayer);
                      that.teeJointVectorSource = null;
                    }

                    //四通
                    if (characteristicCheckedKeys.indexOf('quadJoint') >= 0 ) {
                      if(!that.quadJointVectorSource){
                        const item =find(appendageCharacMap,(o)=>o.key==='quadJoint')
                        if(item){
                          that.renderAppendageCharac(item);
                        }
                      }
                    } else {
                      that.map.removeLayer(that.quadJointVectorLayer);
                      that.quadJointVectorSource = null;
                    }

                    //堵头
                    if (characteristicCheckedKeys.indexOf('plug') >= 0 ) {
                      if(!that.plugVectorSource){
                        const item =find(appendageCharacMap,(o)=>o.key==='plug')
                        if(item){
                          that.renderAppendageCharac(item);
                        }
                      }
                    } else {
                      that.map.removeLayer(that.plugVectorLayer);
                      that.plugVectorSource = null;
                    }

                    //直线点
                    if (characteristicCheckedKeys.indexOf('straight') >= 0 ) {
                      if(!that.straightVectorSource){
                        const item =find(appendageCharacMap,(o)=>o.key==='straight')
                        if(item){
                          that.renderAppendageCharac(item);
                        }
                      }
                    } else {
                      that.map.removeLayer(that.straightVectorLayer);
                      that.straightVectorSource = null;
                    }

                    //转折点
                    if (characteristicCheckedKeys.indexOf('turningPoint') >= 0 ) {
                      if(!that.turningPointVectorSource){
                        const item =find(appendageCharacMap,(o)=>o.key==='turningPoint')
                        if(item){
                          that.renderAppendageCharac(item);
                        }
                      }
                    } else {
                      that.map.removeLayer(that.turningPointVectorLayer);
                      that.turningPointVectorSource = null;
                    }

                    //变径点
                    if (characteristicCheckedKeys.indexOf('changeDiameterPoint') >= 0 ) {
                      if(!that.changeDiameterPointVectorSource){
                        const item =find(appendageCharacMap,(o)=>o.key==='changeDiameterPoint')
                        if(item){
                          that.renderAppendageCharac(item);
                        }
                      }
                    } else {
                      that.map.removeLayer(that.changeDiameterPointVectorLayer);
                      that.changeDiameterPointVectorSource = null;
                    }

                  },
                });
              }}
            >
              <TreeNode title="特征" key="design">
                <TreeNode title={<span>三通 <img
                  src={santong} alt=""/> ({this.props.pipe_home.teeJoint&&this.props.pipe_home.teeJoint.features.length})</span>} key="teeJoint"/>
                <TreeNode title={<span>四通 <img
                  src={sitong} alt=""/> ({this.props.pipe_home.quadJoint&&this.props.pipe_home.quadJoint.features.length})</span>} key="quadJoint"/>
                <TreeNode title={<span>堵头 <img
                  src={dutou} alt=""/> ({this.props.pipe_home.plug&&this.props.pipe_home.plug.features.length})</span>} key="plug"/>
                <TreeNode title={<span>直线点 <img
                  src={zhixiandian} alt=""/> ({this.props.pipe_home.straight&&this.props.pipe_home.straight.features.length})</span>} key="straight"/>
                <TreeNode title={<span>转折点 <img
                  src={zhuanzhedian} alt=""/> ({this.props.pipe_home.turningPoint&&this.props.pipe_home.turningPoint.features.length})</span>} key="turningPoint"/>
                <TreeNode title={<span>变径点 <img
                  src={bianjingdian} alt=""/> ({this.props.pipe_home.changeDiameterPoint&&this.props.pipe_home.changeDiameterPoint.features.length})</span>} key="changeDiameterPoint"/>
              </TreeNode>
            </Tree>
            <Tree
              checkable
              autoExpandParent
              checkedKeys={designCheckedKeys}
              onCheck={(checkedKeys, info) => {
                dispatch({
                  type: 'pipe_home/changeDesignCheckenKeys',
                  payload: checkedKeys,
                  callback: () => {
                    const {  pipe_home: {  designCheckedKeys} } = this.props;
                    if (designCheckedKeys.indexOf('design1') >= 0 ) {
                      if(!that.designPipeVectorSource){
                        that.renderDesignPipe();
                      }
                    } else {
                      that.map.removeLayer(that.designPipeVectorLayer);
                      that.designPipeVectorSource = null;
                    }
                    if (designCheckedKeys.indexOf('holeCover') >= 0) {
                      if(!that.holeCoverVectorSource){
                        that.renderHoleCover();
                      }
                    } else {
                      that.map.removeLayer(this.holeCoverVectorLayer);
                      that.holeCoverVectorSource = null;
                    }

                    if (designCheckedKeys.indexOf('reduceValve') >= 0) {
                      if(!that.reduceValveVectorSource){
                        that.renderReduceValve();
                      }
                    } else {
                      that.map.removeLayer(this.reduceValveVectorLayer);
                      that.reduceValveVectorSource = null;
                    }
                  },
                });
              }}
            >
              <TreeNode title="设计管网" key="design">
                <TreeNode title="设计管道(蓝线)" key="design1"/>
                <TreeNode title={<span>设计井盖<img
                  src={jinggai} alt=""/></span>} key="holeCover"/>
                <TreeNode title={<span>设计减压阀<img
                  src={jianyafa} alt=""/>
              </span>} key="reduceValve"/>
              </TreeNode>
            </Tree>
            <h3>管道/附属物/特征管径</h3>
            <ASelect  onChange={(value)=>{
              console.log('value',value)
              dispatch({
                type: 'pipe_home/changeBore',
                payload: value,
                callback:()=>{
                  dispatch({
                    type: 'pipe_home/fetchPipe',
                    payload: {},
                    callback: () => {
                      console.log('callback');
                      if(that.pipeVectorLayer){
                        that.map.removeLayer(that.pipeVectorLayer);
                        that.pipeVectorSource = null;
                      }
                      that.renderPipe();

                      for(let i=0;i<appendageCharacMap.length;i++){
                        dispatch({
                          type: 'pipe_home/fetchAppendageCharac',
                          payload:appendageCharacMap[i] ,
                          callback: () => {
                            console.log('fetchAppendageCharac callback');
                            if(that[`${appendageCharacMap[i].key}VectorSource`]){
                              that.map.removeLayer(that[`${appendageCharacMap[i].key}VectorLayer`]);
                              that[`${appendageCharacMap[i].key}VectorSource`] = null;
                            }
                            that.renderAppendageCharac(appendageCharacMap[i]);
                          },
                        });
                      }

                    },
                  });
                }
              });
            }} value={bore} style={{width:'180px',margin:'0 10px 20px'}}>
              {
                ['全部',1000,800,600,500,400,300,200,150,100,50,40,32,25,20].map((item,index)=>{
                  return  <Option key={index} value={item}>{item}</Option>
                })
              }
            </ASelect>
          </div>
        </div>

      </div>
      <div className="map-search">
        <div style={{display:'inline-block',position:'relative',top:"6px"}} title={'清空内容'}>
          <Button onClick={()=>{

            this.changeSearchValue('')
            this.setState({
             searchKey:(Math.random()*10).toString(),
            })
          }} type={'danger'} style={{width:'45px',height:'29px'}}  icon="delete"></Button></div>
        <div style={{display:'inline-block'}}>
          <Search key={this.state.searchKey} id={'search-input'} defaultValue={searchText} placeholder="请输入附属物/特征编号" onSearch={this.changeSearchValue} enterButton />
        </div>

      </div>
      <div className="map_control">
        <Tooltip title={'全图'}>
          <div className="map_control_item" onClick={this.setCenter}>

            <AIcon type="border-outer"/>
          </div>
        </Tooltip>
        <Tooltip title={'放大'}>
          <div className="map_control_item" onClick={this.ZoonIn}>

            <AIcon type="plus-circle"/>

          </div>
        </Tooltip>
        <Tooltip title={'缩小'}>
          <div className="map_control_item" onClick={this.ZoonOut}>

            <AIcon type="minus-circle"/>

          </div>
        </Tooltip>
        <Tooltip title={'框选'}>
          <div className="map_control_item" onClick={() => {
            this.setState({
              canDrag: true,
            });
          }}>

            <AIcon type="select"/>

          </div>
        </Tooltip>
        <Tooltip title={'显示切换图层'}>
          <div className="map_control_item" onClick={() => {
            dispatch({
              type: 'pipe_home/changeShowMapType',
              payload: !showMapType,
            });
          }}>

            <AIcon type="snippets"/>

          </div>
        </Tooltip>
        <Tooltip title={'距离测算'}>
          <div className="map_control_item" onClick={() => {
            this.setState({
              calculateType:'LineString'
            },function() {
              this.addInteraction()
            })
          }}>
            <AIcon type="column-height"/>
          </div>
        </Tooltip>
        <Tooltip title={'面积测算'}>
          <div className="map_control_item" onClick={() => {
            this.setState({
              calculateType:'Polygon'
            },function() {
              this.addInteraction()
            })
          }}>
            <AIcon type="radius-setting"/>
          </div>
        </Tooltip>
        {
          (this.state.calculateType==='LineString'||this.state.calculateType==='Polygon')&&
          <div onClick={()=>{
            if(this.drawVector){
              this.map.removeLayer(this.drawVector);
              this.drawSource=null;
              this.drawVector=null;
              this.map.removeInteraction(this.draw);
              let tip=document.querySelectorAll('.ol-tooltip-static')
              let tip2=document.querySelectorAll('.ol-tooltip-measure')
              for(let i=0;i<tip.length;i++){
                tip[i].parentNode.removeChild(tip[i])
              }
              for(let i=0;i<tip2.length;i++){
                tip2[i].parentNode.removeChild(tip2[i])
              }
            }
            this.setState({
              calculateType:''
            })

          }} style={{right:this.state.calculateType==='LineString'?'60px':'0px'}} className={'hidden-calculate'}>
            取消测算
          </div>
        }
      </div>
      <Drawer
        title={`${this.state.editRecord.name} 详情`}
        placement="right"
        destroyOnClose
        onClose={() => {
          this.setState({
            infoModal: false,
          });
        }}
        zIndex={1100}
        width={700}
        visible={this.state.infoModal}
      >
        <Detail id={this.state.editRecord.id}></Detail>
      </Drawer>
      <Modal
        title={<BuildModalTitle visible={this.state.selectModal} modalClass="selectModal" title="选择信息"/>}
        visible={this.state.selectModal}
        destroyOnClose
        width={850}
        footer={[]}
        centered
        className="selectModal"
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        onCancel={() => {
          this.selectedFeatures.clear();
          this.setState({ selectModal: false, selectFeature: [] });
        }}

      >
        <SelectModalContent showDetail={(row) => {
          this.setState({
            editRecord: row,
            infoModal: true,
          });
        }}
        showWorkstationDetail={(item)=>{
          this.setState({
            workstationModal: true,
            editRecord:item
          });
        }}

                            showWaterDetail={this.showWaterDetail}
                            selectFeature={this.state.selectFeature}></SelectModalContent>

      </Modal>
      <Modal
        title={<BuildModalTitle visible={this.state.editModal} modalClass="editModal"
                                title={this.state.modalTitle+'历史数据'}/>}
        destroyOnClose
        visible={this.state.editModal}
        width={1000}
        centered
        onOk={() => {
          this.setState({ editModal: false, waterType: [] });
        }}
        className="editModal"
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        onCancel={() => {
          this.setState({ editModal: false, waterType: [] });
        }}

      >
        <Chart editRecord={this.state.waterType} ></Chart>

      </Modal>
      <Modal
        title={<BuildModalTitle visible={this.state.workstationModal} modalClass="workstationModal"
                                title={`${this.state.editRecord.name} 数据`}/>}
        destroyOnClose
        onCancel={() => {
          this.setState({
            workstationModal: false,
            editRecord: {},
          });
        }}
        width={1100}
        zIndex={1999}
        centered
        className="workstationModal"
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        visible={this.state.workstationModal}
        footer={null}
      >
        <ValveData
          editRecord={this.state.editRecord}
          wrappedComponentRef={(inst) => this.dataForm = inst}
        />
      </Modal>
      <Modal
        title={<BuildModalTitle visible={this.state.imgModal} modalClass="imgModal"
                                title={`添加 ${this.state.editRecord.appendageId} 图片`}/>}
        destroyOnClose
        onCancel={() => {
          this.setState({
            imgModal: false,
          });
        }}
        width={600}
        centered
        className="imgModal"
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        visible={this.state.imgModal}
        onOk={this.handleAddImg}
      >
        <AddImg
          editRecord={this.state.editRecord}
          wrappedComponentRef={(inst) => this.AddImgForm = inst}
        />
      </Modal>
    </div>;
  }
}

export default BasicList;
